<template>
	<view class="page">
		<!-- 顶部轮播图 -->
		<swiper indicator-color="#e2e2e2"
						indicator-active-color="#fd6ab4"
						:indicator-dots="true"
						:autoplay="true"
						:circular="true"
						:interval="5000"
						:duration="1000">
			<swiper-item v-for="item in carouse" :key="item.cfid">
				<image class="img" :src="item.banner" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 中间签到和信息 -->
		<view class="menu">
			<view class="menu-item">
				<text>签到</text>
			</view>
			<view class="splite"></view>
			<view class="menu-item">
				<text>产品宣传</text>
			</view>
		</view>
		<!-- 下面的商品列表 -->
		<view class="goods-list">
			<image class="title" src="../../static/home_icon/home_bg_all%20products@2x.png" mode="scaleToFill"></image>
			<GoodsList :list="goodsList" @loadGoods="loadGoods"></GoodsList>
		</view>
		<!-- 自己写的一个loadmore小组件 -->
		<LoadMore :msg="loadMsg"></LoadMore>
	</view>
</template>

<script>
import { initHomePage, getAllGoods } from '../../api/api.js'
import GoodsList from '../../components/GoodsList.vue'
import LoadMore from '../../components/LoadMore.vue'
export default {
	data() {
		return {
			carouse: [], // 轮播图
			goodsList: [], // 商品列表
			page: 1,
			pageSize: 10,
			haveMore: true,
			loadMsg: '上拉加载更多'
		}
	},
	onReady() {
		this.init()
		this.getGoods()
	},
	// 下拉刷新
	async onPullDownRefresh () {
		this.carouse = []
		this.goodsList = []
		this.page = 1
		this.haveMore = true
		this.loadMsg = '上拉加载更多'
		await this.init()
		await this.getGoods()
		await uni.stopPullDownRefresh();
	},
	// 上拉加载
	onReachBottom () {
		this.getGoods()
	},
	// #ifdef MP-WEIXIN
	onShareAppMessage (res) {
		return {
			title: '蕙之魅',
			path: '/pages/home/home'
		}
	},
	// #endif
	methods: {
		init () {
			let query = {
				token: '888888',
				currPage: 1,
				pageSize: 10
			}
			initHomePage(query).then(res => {
				this.carouse = res.carouselfigs
			})
		},
		// 获取商品列表
		getGoods () {
			if (this.haveMore) {
				this.loadMsg = '加载中'
				let query = {
					token: '888888',
					currPage: this.page,
					pageSize: this.pageSize
				}
				getAllGoods(query).then(res => {
					this.formartGoodsList(res.list)
					if (res.list.length === this.pageSize) {
						this.page++
					} else {
						this.loadMsg = '没有更多啦'
						this.haveMore = false
					}
				})
			}
		},
		// 跳转商品详情页面
		loadGoods (id) {
			uni.navigateTo({
				url: `./Goods/Goods?id=${id}`,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		// 对数据进行统一的格式化再传参给组件
		formartGoodsList (list) {
			list.forEach(e => {
				let { goodsid:id, img, is_discount: discount, marketprice: vipprice, name, price, sales:salenum } = e
				let obj = {
					id, img, discount, vipprice, name, price, salenum
				}
				this.goodsList.push(obj)
			})
		}
	},
	components: {
		GoodsList,
		LoadMore
	}
}
</script>

<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.page {
	text-align: center;
	.img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.menu {
		display: flex;
		padding: 24upx;
		@include wh(100%, 176upx);
		box-sizing: border-box;
		.splite {
			width: 24upx;
		}
		.menu-item {
			flex: 1;
			border-radius: 4px;
			background-color: $M_PINK;
			@include shadow();
			color: #fff;
		}
	}
	.goods-list {
		padding: 0 24upx;
		.title {
			margin: 40upx 0;
			@include wh(304upx, 36upx);
		}
	}
}
</style>
